<%@page import="com.cait.dutyfree.pojo.view.ProductDTO"%>
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%@ include file="common/taglibs.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>Product Details</title>
    <script type="text/javascript" src="<%=request.getContextPath()%>/pages/js/jquery-1.5.js"></script>	
	<link rel="StyleSheet" type="text/css" href="<%=request.getContextPath()%>/pages/css/common.css"></link>
	
	<script type="text/javascript">
		function gup( name )
		{
		  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
		  var regexS = "[\\?&]"+name+"=([^&#]*)";
		  var regex = new RegExp( regexS );
		  var results = regex.exec( window.location.href.replace("%20"," ") );
		  if( results == null )
		    return "";
		  else
		    return results[1];
		}
		
		function back(){
			window.parent.location='../index.jsp';
		}
		
		function load(){
			document.getElementById('image').src=gup( 'imageUrl' );
		}
		
		function addToCart(productId, airlineId){
			var quantity = jQuery("#quantity").val();
			jQuery.ajax({
				  url: "<%=request.getContextPath()%>/addToCart?productId=" + productId + "&quantity=" + quantity + "&airlineId=" + airlineId,
				  success: function(data){
					  alert(data);
				  }
			});
		}
	</script>
  </head>
  
  <body style="background-image: none;"> 
   		<div class="bodyContent" align="center">
  		<table class="" style="width: 780px;height: 800px;">
	   		<thead style="background-image: url('pages/images/sliced/20.jpg') ;background-repeat: no-repeat;">
				<tr>						
					<td colspan="3" style="color: #EE2C2C;font-size: 18px;text-align: left;width: 780px;height: 50px;">&nbsp;&nbsp;&nbsp;&nbsp;PRODUCT DETAILS</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td style="vertical-align: top;">
						<table cellpadding="5" style="width: 740px;height: 600px;-moz-border-radius: 5px 5px 5px 5px;">
							<tr>
								<td colspan="2" align="center" style="height: 20px;padding: 20px;">
									<h3 style="color: #EE2C2C;font-size: 22;">
										<s:property value="productDto.productName"/>
									</h3>
								</td>
							</tr>
							<tr>
								<td width="200px;" style="vertical-align: top;">
									<img alt="" src = "./uploadImages/<s:property value="productDto.prdImageUrl1"/>" width="200" height="200">
								</td>
								<td style="vertical-align: top;">
									<div style="font-weight: bold;font-size: 14px;">
										DESCRIPTION<br>
									</div>
									<div>
										<s:property value="productDto.productDescription"/>
									</div>
									<div style="font-weight: bold;font-size: 14px;margin-top: 10px;">
										VENDOR<br>
									</div>
									<div >
										<s:property value="productDto.vendor"/>
									</div>
								</td>
								<td style="vertical-align: top;">
									<div style="font-weight: bold;font-size: 24px;margin-top: 10px;">
										<s:property value="productDto.currencyCode"/>&nbsp;<s:property value="productDto.price"/>
									</div>
									<div style=";font-size: 14px;margin-top: 14px;background-color: #cccccc;padding: 10px 10px 10px 10px;
									-moz-border-radius: 5px 5px 5px 5px;height: 80px;width: 110px;">
										QTY  &nbsp;&nbsp;<input type="text" size="10" width="10" value="1" style="width: 30px;" id="quantity"/><br/><br/>
										
										<input type="button" style="background-color: red;" value="Add To Cart" onclick="addToCart('<s:property value="productDto.id"/>', '<s:property value="#session['airlineId']"/>')">
									</div>
								</td>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
					<td align="right" style="margin-right: 10px;">
						<input type="button" value="Back" onclick="back();">
					</td>
				</tr>
			</tbody>
   		</table>
  	</div>
  </body>
</html>
